<script setup lang="ts">
import { ref } from 'vue'

const messages = ref<string[]>([])// 从后端拉回的消息数组
const newMessage = ref('')// 输入框里用户正在敲的内容
const status = ref('点击按钮开始测试连接...')// 顶部状态条文字

// 测试后端连接
const testConnection = async () => {
  try {
    status.value = '🔄 测试连接中...'
    const response = await fetch('http://localhost:8000/health')
//await fetch？？？
// 什么是 fetch？
// fetch 是现代浏览器和 Node.js 提供的一个 Web API，用于发起 HTTP 请求。
// 它返回一个 Promise，可以用来获取网络资源。
// 什么是 await？
// await 是 ES2017 (ES8) 引入的关键字，用于等待 Promise 的解决。它只能在 async 函数内部使用。
    if (response.ok) {
      status.value = '✅ 后端连接成功!'
    } else {
      status.value = `❌ 后端响应错误: ${response.status}`
    }
  } catch (error) {
    status.value = '❌ 无法连接到后端服务 (检查端口8000是否启动)'
    console.error('连接错误:', error)
    //catch (error)？？
    //catch 是 JavaScript 中用于捕获和处理错误的关键字。
    // 在你的代码中，它与 try 配合使用，形成了 try-catch 错误处理结构。
  }
}

// 获取消息“访问 /api/messages，后端把现有消息给我，我拿来刷新页面列表。访问 /api/messages，后端把现有消息全部给我，我拿来刷新页面列表。”
const getMessages = async () => {
  try {
    status.value = '🔄 获取消息中...'
    const response = await fetch('http://localhost:8000/api/messages')
    
    if (response.ok) {
      const data = await response.json()
      messages.value = data.messages
      status.value = '✅ 获取成功'
    } else {
      status.value = `❌ 获取失败: ${response.status}`
    }
  } catch (error) {
    status.value = '❌ 请确认后端服务已启动在端口8000'
    console.error('获取错误:', error)
  }
}

// 添加消息用户发新消息
const addMessage = async () => {
  if (!newMessage.value) {
    status.value = '⚠️ 请输入消息内容'
    return
  }
  
  try {
    status.value = '🔄 发送消息中...'
    const response = await fetch('http://localhost:8000/api/messages', {
      method: 'POST',//请求方法：POST作用：向服务器发送数据（而不是获取数据）
      headers: { 'Content-Type': 'application/json' },//请求头：告诉服务器发送的数据格式
//  Content-Type：内容类型
// application/json：表示发送的是 JSON 格式的数据
      body: JSON.stringify({ message: newMessage.value })
// 请求体：实际发送的数据
// JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串
// { message: newMessage.value }：要发送的数据对象
// newMessage.value：用户在输入框中输入的内容
    })
    if (response.ok) {
      newMessage.value = ''
      getMessages() // 重新获取消息
      status.value = '✅ 添加成功'
    } else {
      status.value = `❌ 添加失败: ${response.status}`
    }
  } catch (error) {
    status.value = '❌ 发送失败，检查后端连接'
    console.error('发送错误:', error)
  }
}
//“把输入框里的文字用 POST 扔到后端，后端存好后我重新拉一遍列表，页面就实时更新了。”
</script>

<template>
  <div class="app">
    <h1>🚀 前后端数据互通演示</h1>
    
    <div class="status">{{ status }}</div>
    <!-- 实时显示“连接中/成功/失败”的 emoji 提示。 -->
    <div class="section">
      <h2>🔌 连接测试</h2>
      <button @click="testConnection" class="btn test">测试后端连接</button>
      <p class="tip">💡 如果连接失败，请确认后端在端口8000运行</p>
    </div>


    <!-- /按钮触发 getMessages()，拿到数组后 v-for 循环渲染。 -->
    <div class="section">
      <h2>📥 从后端获取数据</h2>
      <button @click="getMessages" class="btn">获取消息</button>
      <div class="messages">
        <div v-for="(message, index) in messages" :key="index" class="message">
          {{ index + 1 }}. {{ message }}
        </div>
      </div>
    </div>

    <!-- 输入框双向绑定 newMessage，回车或点按钮都触发 addMessage()。 -->
    <div class="section">
      <h2>📤 发送数据到后端</h2>
      <input 
        v-model="newMessage" 
        placeholder="输入新消息" 
        @keyup.enter="addMessage"
        class="input"
      />
      <button @click="addMessage" class="btn">发送消息</button>
    </div>

    <div class="help">
      <h3>🆘 如果出现连接问题：</h3>
      <ol>
        <li>确认后端已启动：访问 <a href="http://localhost:8000" target="_blank">http://localhost:8000</a></li>
        <li>检查控制台是否有错误信息 (F12)</li>
        <li>重启后端服务</li>
        <li>检查防火墙设置</li>
      </ol>
    </div>
  </div>
</template>

<style>
.app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1, h2 {
  color: #333;
}

.status {
  padding: 15px;
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  margin: 20px 0;
  text-align: center;
  font-weight: bold;
}

.section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.btn {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

.btn.test {
  background: #28a745;
}

.btn:hover {
  opacity: 0.8;
}

.input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 300px;
  margin: 5px;
}

.messages {
  margin-top: 15px;
}

.message {
  padding: 10px;
  background: #e9ecef;
  margin: 5px 0;
  border-radius: 5px;
}

.tip {
  color: #666;
  font-size: 14px;
  margin: 10px 0;
}

.help {
  background: #fff3cd;
  padding: 15px;
  border-radius: 5px;
  margin-top: 30px;
}

.help h3 {
  margin-top: 0;
  color: #856404;
}

.help ol {
  color: #856404;
}

.help a {
  color: #007bff;
}
</style>